<style scoped  lang="scss">
  @import "../../../assets/css/login";
</style>
<template lang="html">
  <div class="login-container"  >
    <div class="login-header">
      <span class="login-company">德阳市建设投资发展集团公司</span>
      <br>
      <span class="login-project-title">项目管理平台</span>

    </div>
    <el-card class="login-panel">
      <div clasblocks="login-margin-t50"></div>
      <!--<input-box :input-lbl="'用户名'" :type="'text'" v-model="username"></input-box>-->
      <!--<div class="login-divide-30"></div>-->
      <!--<input-box :input-lbl="'密码'" :type="'password'" v-model="password"></input-box>-->

      <!--<div class="login-btn" :class="{'disabled':!valid}">登录</div>-->
       <el-form ref="loginForm" :model="loginForm" :rules="logiblocknRules">
          <el-form-item prop="username" label="用户名">
           <el-input name="username" type="text" v-model="loginForm.username" placeholder="请输入用户名" autoComplete="off"></el-input>
          </el-form-item>
           <el-form-item prop="password" label="密码">
           <el-input name="password" type="password" v-model="loginForm.password" @keyup.enter.native="handleLogin" placeholder="请输入密码" autoComplete="off"></el-input>
          </el-form-item>
           <div class="login-tag">
            <toggle @click.native="Remember($event)"/>
            <span class="text-icon" style="margin-right: 80px;">记住密码</span>
            <toggle @click.native="Toggle($event)" />
            <span class="text-icon">重置密码</span>
          </div>
          <div class="login-divide-30">
          </div>
           <el-form-item>
                <el-button type="primary" @click.native.prevent="doLogin" style="width:100%;" :loading="loading">
                  登录
            </el-button>
           </el-form-item>
       </el-form>
    </el-card>

    <!--<chart :editable="true" :is-edit-check="true" :project.sync="project" :check-data.sync="CheckData"></chart>-->


    <!--<percentage-bar :start="'2013-2-1'" :end="'2013-12-31'"></percentage-bar>-->
    <!--<examine-banner></examine-banner>-->
  </div>
</template>

<script>
//  import InputBox from './InputBox.vue'
  import Toggle from '@/components/Toggle'
  import ElMenu from 'element-ui/packages/menu/src/menu'
  import ElMenuItem from 'element-ui/packages/menu/src/menu-item'
  import ElCard from 'element-ui/packages/card/src/main'
  import ElForm from 'element-ui/packages/form/src/form'
  import ElFormItem from 'element-ui/packages/form/src/form-item'
  import ElInput from 'element-ui/packages/input/src/input'
  import ElButton from 'element-ui/packages/button/src/button'
  import { Message } from 'element-ui'
//  import PercentageBar from '../../../components/PercentageBar'
  import  ExamineBanner from "../../project/ExamineBanner"

  import Chart from "@/components/Dialog/Chart/Index";

  export default {
    name: 'login',
    components: {
      Toggle,
      ElButton,
      ElInput,
      ElFormItem,
      ElForm,
      ElCard,
      ElMenuItem,
      ElMenu,
//      PercentageBar,
      ExamineBanner,
      Chart
    },
    data () {
      return {
        CheckData:null,
        project:null,
        isRemName: false,
        loginForm: {
          username: '',
          password: ''
        },
        loading: false,
        loginRules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        }
      }
    },
    //设置用户记录的信息
    mounted () {
      try {

        var login_info=JSON.parse(localStorage.getItem('login_info'))

        if (login_info != null) {

          this.loginForm.username=login_info.username

          this.loginForm.password=login_info.password

        }

      }catch (Exception) {

        console.log(Exception);

      }



    },
    methods: {
      Remember (event){

        var checkbox=event.target;

        if (checkbox.checked) {
          this.isRemName=true
        }

      },
      Toggle (event) {

        var checkbox=event.target;

        if (this.loading){
          checkbox.checked=!checkbox.checked
        }

        if (checkbox.checked) {
          this.loginForm.username = ''
          this.loginForm.password = ''

          setTimeout(()=> { checkbox.checked=false },200);

        }
      },
      doLogin () {
        var self = this

        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            self.loading = true

            var sendMsg = self.loginForm

            /**
             *记录用户的登录信息
             */
            if (this.isRemName) {
              sendMsg = Object.assign(self.loginForm,{ 'save': self.isRemName })
            }

            this.$store.dispatch('doLogin', sendMsg).then(() => {

              self.loading = false

              this.$router.push({ path: '/' });

            }, response => {

                Message.error(response.data.message)

                self.loading = false

            }).catch(err => {

              Message.error(err + ',找不到!')

              self.loading = false

            })

          } else {
            return false
          }
        })
      }
    }
  }

</script>
